<script setup>
import { onMounted, ref, nextTick, onUnmounted } from 'vue'
import { getMessageList, setMegStatus } from '@/api/user'
import { Icon } from '@iconify/vue';
import { useRouter } from 'vue-router'
import useStore from "@/store"
const { userInfo } = useStore()
const router = useRouter()
const mainRef = ref(null)
const message = ref()
const messageRecord = ref([])
const friendInfo = JSON.parse(localStorage.getItem("friendInfo"))
const loadGetMessage = async () => {
	const res = await getMessageList({ friendId: friendInfo.id, userId: userInfo.userInfo.id })
	messageRecord.value = res.data
	nextTick(() => {
		mainRef.value.scrollTop = mainRef.value.scrollHeight
	})
}
loadGetMessage()

// 发送消息
const sendMeg = async (e) => {
	if (e.code == 'Enter' && message.value) {
		userInfo.webSocket.send(JSON.stringify({ toName: friendInfo.id, content: message.value }))
		messageRecord.value.push({ senderId: userInfo.userInfo.id, receiverId: friendInfo.id, content: message.value })
		nextTick(() => {
			mainRef.value.scrollTop = mainRef.value.scrollHeight
		})
		message.value = ""
		localStorage.setItem("messageRecord", JSON.stringify(messageRecord.value))
	}
}
// 接受消息
userInfo.webSocket.onmessage = (e) => {
	let response = JSON.parse(e.data)
	if (response.message != "有人上线了" && response.message != "有人下线了") {
		messageRecord.value.push({ senderId: friendInfo.id, receiverId: userInfo.userInfo.id, content: response.message })
		nextTick(() => {
			mainRef.value.scrollTop = mainRef.value.scrollHeight
		})
		localStorage.setItem("messageRecord", JSON.stringify(messageRecord.value))
	}
}
onUnmounted(async () => {
	await setMegStatus({ userId: userInfo.userInfo.id, friendId: friendInfo.id })
})



</script>

<template>
	<div class="bg-[#151515] h-[100vh]">
		<!-- 导航栏 -->
		<van-nav-bar :style="{ background: '#151515' }">
			<template #left>
				<van-icon name="arrow-left" color="#616161" size="20px" @click="router.back()" />
				<div class="bg-[#3a3a46]  rounded-[30px]  px-[8px] text-[10px] mx-[10px]">12</div>
				<div>{{ friendInfo.nickname }}</div>
			</template>
			<template #right>
				<van-icon name="phone-o" color="#fff" size="20px" class="mr-[15px]" />
				<van-icon name="ellipsis" color="#fff" size="20px" />
			</template>
		</van-nav-bar>
		<!-- 主体内容 -->
		<div class="main bg-[#151515]  px-[10px] pt-[10px]" ref="mainRef">
			<!-- 一条消息 -->
			<div v-for="item, index in messageRecord" :key="index">
				<!-- 时间 -->
				<div class="w-[100%] text-center text-[12px] text-[#a2a2a3] mb-[10px]" v-if="false">2024-11-16 15:47:25</div>
				<!-- 对方消息 -->
				<div class="flex items-center mb-[20px]" v-if="item.senderId == friendInfo.id">
					<!-- 头像 -->
					<div class="mr-[10px]">
						<img :src="friendInfo.avatar" class="w-[35px] h-[35px] rounded-[50%]">
					</div>
					<!-- 文本消息 -->
					<div class="bg-[#3b3b43] rounded-[10px] px-[10px] py-[6px]" v-if="true">{{ item.content }}</div>
					<!-- 图文视频消息 -->
					<div v-else>
						<img src="https://dy.ttentau.top/assets/1-DnPioQn1.jpg" class="rounded-[10px] max-w-[180px]">
					</div>
				</div>
				<!-- 我的消息 -->
				<div class="flex items-center justify-end mb-[20px]" v-if="item.senderId == userInfo.userInfo.id">
					<!-- 文本消息 -->
					<div class="bg-[#4874e6] rounded-[10px] px-[10px] py-[6px] max-w-[70%]" v-if="true">
						{{ item.content }}
					</div>
					<!-- 图文视频消息 -->
					<div v-else>
						<img src="https://dy.ttentau.top/assets/1-DnPioQn1.jpg" class="rounded-[10px] max-w-[180px]">
					</div>
					<!-- 头像 -->
					<div class="ml-[10px]">
						<img :src="userInfo.userInfo.avatar" class="w-[35px] h-[35px] rounded-[50%]">
					</div>
				</div>
			</div>
		</div>
		<!-- 输入框 -->
		<div class="w-[100%] field px-[5px]">
			<van-field v-model.trim="message" center clearable placeholder="发送消息..." @keydown="sendMeg">
				<template #label>
					<div class="w-[28px] h-[28px] rounded-[50%] bg-[#698ff4] p-[5px] ml-[10px]">
						<img src="@/assets/camera.png">
					</div>
				</template>
				<template #button>
					<van-icon name="volume-o" color="#fff" size="25px" class="mr-[10px]" />
					<van-icon name="add-o" color="#fff" size="25px" class="mr-[10px]" />
				</template>
			</van-field>
		</div>
	</div>
</template>

<style scoped lang="scss">
.main {
	min-height: 87vh;
	max-height: 87vh;
	overflow-y: scroll;
}


.main::-webkit-scrollbar {
	display: none;
}


.field {
	::v-deep .van-field {
		padding: 8px 0 !important;
		border-radius: 25px !important;
		background: #393939 !important;

		.van-field__label {
			width: auto;
		}
	}

	::v-deep .van-field__control {
		color: #fff !important;
	}
}
</style>
